<script setup lang="tsx">
import { useTaskStore } from '@/store/task'
import { instance } from '@/utils/request'
import { ElButton, ElTag, dayjs, ElMessageBox, ElNotification } from 'element-plus'

const loc = import.meta.env.VITE_LOC

const continueTask = async (row) => {
  await ElMessageBox.confirm('请确定AGV已经移动到等待点', '警告')
  if ([1, 2].includes(row.type)) {
    for (let key in row?.log) {
      if (row?.log[key].includes('确认插管完成')) {
        if (!row?.log[key].includes('确认拔管完成')) {
          await ElMessageBox.confirm('请确定是否已人工拔管完成', '警告')
        }
      }
    }
  }
  await instance({ url: `/dc-task/v1/continue/task`, method: 'get' })
  ElNotification({ type: 'success', title: '发送成功' })
}

const taskStore = useTaskStore()

const tableColumns = [
  { prop: 'id', label: '编号', minWidth: 80, fixed: 'left' },
  {
    prop: 'type',
    label: '任务工序',
    minWidth: 260,
    formatter(row) {
      const valMap =
        loc === '375'
          ? {
              1: '取料任务',
              2: '放料任务',
              3: '送往清洗任务',
              4: '清洗返回任务',
              5: '从任意等待点返回充电室',
              6: '1344取料升降台 => 1344取料等待点',
              7: '1344取料等待点 => 1344取料升降台',
              8: '1344取料升降台 => 1108放料等待点',
              9: '1108放料升降台 => 1108放料等待点',
              10: '1108放料等待点 => 1108放料升降台',
              11: '1108放料升降台 => 1344取料等待点',
              14: '料罐清洗区 => 料罐清洗区等待点',
              15: '料罐清洗区等待点 => 料罐清洗区',
              default: '手动任务',
            }
          : {
              5: '从任意点返回充电室',
              16: '充电室 => 等待点',
              6: '升降台 => 等待点',
              7: '等待点 => 升降台',
              12: '等待点 => 清洗等待点',
              13: '清洗区 => 等待点',
              14: '清洗区 => 清洗等待点',
              15: '清洗等待点 => 清洗区',
              default: '手动任务',
            }
      return <ElTag>{valMap[row.type] || valMap.default}</ElTag>
    },
  },
  {
    prop: 'status',
    label: '任务状态',
    minWidth: 100,
    formatter(row) {
      const valMap = { 1: '未开始', 2: '执行中', 3: '已完成', 4: '异常终止', default: '未知' }
      const colMap = { 1: '', 2: 'warning', 3: 'success', 4: 'danger', default: 'danger' }
      return <ElTag type={colMap[+row.status] || colMap.default}>{valMap[+row.status] || valMap.default}</ElTag>
    },
  },
  {
    prop: 'startTime',
    label: '开始时间',
    minWidth: 180,
    formatter({ startTime }) {
      return !startTime ? '未开始' : startTime
    },
  },
  {
    prop: 'endTime',
    label: '完成时间',
    minWidth: 180,
    formatter({ startTime, endTime }) {
      return !startTime ? '未开始' : !endTime ? '未完成' : endTime
    },
  },
  {
    prop: 'runningTime',
    label: '累计耗时',
    minWidth: 140,
    formatter({ createTime, updateTime }) {
      const second = dayjs(updateTime).diff(dayjs(createTime), 'seconds')
      const minute = Math.floor(second / 60)
      return `${minute} 分 ${second % 60} 秒`
    },
  },
  {
    prop: 'action',
    label: '操作',
    minWidth: 160,
    fixed: 'right',
    formatter(row) {
      return (
        <div>
          <ElButton type="warning" plain size="small" onClick={() => continueTask(row)} disabled={row.status !== '2'}>
            继续任务
          </ElButton>
          <ElButton
            type="danger"
            size="small"
            onClick={() => taskStore.cancelTask(row.id)}
            disabled={row.status !== '2'}
          >
            终止
          </ElButton>
        </div>
      )
    },
  },
]
</script>

<template>
  <ElDrawer :size="1200" title="任务列表">
    <div class="h-full flex flex-col gap-4">
      <ElTable :data="taskStore.taskList" height="100%" stripe>
        <template v-for="col in tableColumns" :key="col.prop">
          <ElTableColumn v-bind="col" align="center"></ElTableColumn>
        </template>
      </ElTable>
      <ElPagination
        v-model:current-page="taskStore.taskListPaging.currentPage"
        v-model:page-size="taskStore.taskListPaging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :small="true"
        :background="true"
        :total="taskStore.taskListPaging.total"
        @current-change="taskStore.getTaskList"
        @size-change="taskStore.getTaskList"
      ></ElPagination>
    </div>
  </ElDrawer>
</template>
